<template>
  <div>
    <h1>SG滤波处理</h1>
    <el-form :model="formData">
      <el-form-item label="窗口长度">
        <el-input v-model="formData.window_length" type="number"></el-input>
      </el-form-item>
      <el-form-item label="多项式阶数">
        <el-input v-model="formData.polyorder" type="number"></el-input>
      </el-form-item>
      <el-form-item label="模式">
        <el-select v-model="formData.mode" placeholder="请选择模式">
          <el-option label="mirror" value="mirror"></el-option>
          <el-option label="constant" value="constant"></el-option>
          <el-option label="nearest" value="nearest"></el-option>
          <el-option label="wrap" value="wrap"></el-option>
          <el-option label="interp" value="interp"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <file-upload @data-extracted="handleDataExtracted"></file-upload>
    <el-button type="primary" @click="processData" :disabled="!uploadedData || !formData.window_length || !formData.polyorder">开始处理</el-button>
    <el-progress v-if="loading" :percentage="progress"></el-progress>
    <line-chart v-if="uploadedData && uploadedData.wavelengths.length && uploadedData.intensities.length"
                :x="uploadedData.wavelengths" 
                :y="uploadedData.intensities" 
                :fileName="uploadedData.fileName + ' (原始数据)'"></line-chart>
    <line-chart v-if="processedData" 
                :x="processedData.wavelengths" 
                :y="processedData.intensities" 
                :fileName="uploadedData.fileName + ' (处理后数据)'"></line-chart>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload.vue';
import LineChart from '@/components/LineChart.vue';
import axios from 'axios';

export default {
  components: {
    FileUpload,
    LineChart
  },
  data() {
    return {
      formData: {
        window_length: 15, // 默认窗口长度
        polyorder: 2, // 默认多项式阶数
        mode: 'mirror'
      },
      uploadedData: null,
      loading: false,
      progress: 0,
      processedData: null
    };
  },
  methods: {
    handleDataExtracted(data) {
      this.uploadedData = data;
    },
    async processData() {
      if (!this.uploadedData) return;

      // 如果窗口长度或多项式阶数为空，则使用默认值
      if (!this.formData.window_length) {
        this.formData.window_length = 15;
      }
      if (!this.formData.polyorder) {
        this.formData.polyorder = 2;
      }

      this.loading = true;
      this.progress = 0;

      const payload = {
        window_length: this.formData.window_length,
        polyorder: this.formData.polyorder,
        mode: this.formData.mode,
        fileName: this.uploadedData.fileName,
        wavelengths: this.uploadedData.wavelengths,
        intensities: this.uploadedData.intensities
      };

      try {
        const response = await axios.post('/api/process', payload, {
          onUploadProgress: progressEvent => {
            this.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          }
        });

        this.processedData = response.data;
      } catch (error) {
        console.error('数据处理错误:', error);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
/* 添加样式以适应页面设计 */
</style>
